<template>
	<view>
		<view class="box-list">
			<view class="list-item" v-for="(item,index2) in list" :key="index2" @click="handledetail(item.goodsId)">
				<image :src="item.goodsImg" mode="aspectFill"></image>
				<view class="list-item-box">
					<view class="title">{{item.goodsName}}</view>
					<view class="price">￥{{item.goodsPrice}}</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props:['list'],
		name:"goodsList",
		data() {
			return {
				
			};
		},
		watch:{
			
		},
		methods:{
			//商品详情
			handledetail(goodsId){
				const params = 'goodsId=' + goodsId
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
				})
			}
		}
	}
</script>

<style scoped lang="scss">
    .box-list{
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    	flex-wrap: wrap;
    }
    .list-item{
    	width: 334rpx;
    	height: 452rpx;
    	margin-top: 28rpx;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: space-between;
    }
    .list-item image{
    	width: 334rpx;
    	height: 334rpx;
    }
    .list-item-box{
    	padding: 12rpx 6rpx 2rpx 6rpx;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: space-between;
    	flex: 1;
    }
    .title{
    	font-size: 28rpx;
    	font-family: PingFang SC-Regular, PingFang SC;
    	font-weight: 400;
    	color: #333333;
    	line-height: 36rpx;
    	overflow: hidden;
    	-webkit-line-clamp: 1;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    }
    .price{
    	font-size: 28rpx;
    	font-family: PingFang SC-Regular, PingFang SC;
    	font-weight: 400;
    	color: #333333;
    	line-height: 32rpx;
    }
</style>